<template>
	<t-layout-page>
		<t-layout-page-item>
			<t-table
				title="单元格单独编辑"
				:table="table"
				:columns="table.columns"
				:isShowPagination="false"
				:listTypeInfo="table.listTypeInfo"
			></t-table>
		</t-layout-page-item>
	</t-layout-page>
</template>
<script>
import data from './data.json'
export default {
	data() {
		return {
			table: {
				// 接口返回数据
				data: [],
				// 表头数据
				columns: [
					{ prop: 'workOrderNo', label: '工单号', minWidth: '160' },
					{ prop: 'workStepName', label: '工序', minWidth: '100' },
					{ prop: 'materialName', label: '物料', minWidth: '140' },
					{ prop: 'materialSpecs', label: '规格', minWidth: '140' },
					{ prop: 'batchNo', label: '物料批次', minWidth: '180' },
					{ prop: 'labelCode', label: '包号', minWidth: '220' },
					{
						prop: 'weight',
						label: '重量',
						minWidth: '180',
						canEdit: false,
						configEdit: {
							label: '重量',
							type: 'input',
							editComponent: 'el-input-number',
							event: 'weight',
							bind: scope => {
								return {
									controls: false,
									disabled: scope.row.isEdit ? false : true,
									min: 0,
									max: 9999,
									precision: 2
								}
							}
						}
					},
					{
						prop: 'equipmentName',
						label: '生产设备',
						minWidth: '200',
						canEdit: false,
						configEdit: {
							label: '生产设备',
							type: 'select-arr',
							editComponent: 'el-select',
							list: 'equipmentList',
							arrLabel: 'equipmentName',
							arrKey: 'equipmentCode',
							bind: scope => {
								return {
									disabled: scope.row.isEdit ? false : true
								}
							}
						}
					},
					{
						prop: 'scanType',
						label: '工位类型',
						minWidth: '110',
						render: text => {
							let val = ''
							switch (text) {
								case 5:
									val = '上料工位'
									break
								case 6:
									val = '下料工位'
									break
							}
							return <span>{val}</span>
						}
					},
					{ prop: 'createBy', label: '操作人', minWidth: '120' },
					{ prop: 'team', label: '班组', minWidth: '100' },
					{ prop: 'createTime', label: '操作时间', minWidth: '160' },
					{ prop: 'updateBy', label: '修改人', minWidth: '120' },
					{ prop: 'updateTime', label: '修改时间', minWidth: '160' }
				],
				listTypeInfo: {
					equipmentList: [
						{
							id: 77,
							equipmentGroupId: 12,
							equipmentCode: '0-A-jzescj-0005',
							equipmentName: '1#电捕',
							deptName: '石墨电极厂'
						},
						{
							id: 78,
							equipmentGroupId: 12,
							equipmentCode: '0-A-jzescj-0006',
							equipmentName: '2#电捕',
							deptName: '石墨电极厂'
						},
						{
							id: 79,
							equipmentGroupId: 12,
							equipmentCode: '0-A-jzescj-0007',
							equipmentName: '3#电捕',
							deptName: '石墨电极厂'
						}
					]
				},
				operator: [
					{
						text: '编辑',
						disabled: false,
						show: { key: 'isEdit', val: [false] },
						fun: this.edit
					},
					{
						text: '保存',
						fun: this.save,
						show: { key: 'isEdit', val: [true] }
					},
					{
						text: '取消',
						fun: this.cancel,
						show: { key: 'isEdit', val: [true] }
					}
				],
				operatorConfig: {
					fixed: 'right', // 固定列表右边（left则固定在左边）
					width: 160,
					label: '操作'
				}
			}
		}
	},
	created() {
		this.getList()
	},
	methods: {
		getList() {
			let res = data
			if (res.success) {
				res.data.rows.map(item => {
					item.isEdit = false
				})
				this.table.data = res.data.rows
			}
		},
		save(row) {
			const { labelInfoId, labelScanLogId, equipmentCode, weight } = row
			const obj = {
				labelInfoId,
				labelScanLogId,
				equipmentCode,
				weight
			}
			console.log('最终变化的数据', obj)

			this.table.columns.map(item => {
				if (item.label == '生产设备') {
					item.canEdit = false
					item.prop = 'equipmentName'
				}
				if (item.label == '重量') {
					item.canEdit = false
				}
			})
			this.table.operator.map(val => {
				if (val.text == '编辑') {
					val.disabled = false
				}
			})
			row.isEdit = false
		},
		cancel(row) {
			row.isEdit = false
			this.table.operator.map(val => {
				if (val.text == '编辑') {
					val.disabled = false
				}
			})
			this.table.columns.map(item => {
				if (item.label == '生产设备') {
					item.canEdit = false
					item.prop = 'equipmentName'
				}
				if (item.label == '重量') {
					item.canEdit = false
				}
			})
		},
		edit(row) {
			row.isEdit = true
			this.table.operator.map(val => {
				if (val.text == '编辑') {
					val.disabled = true
				}
			})
			this.table.columns.map(item => {
				if (item.label == '生产设备') {
					item.canEdit = true
					item.prop = 'equipmentCode'
				}
				if (item.label == '重量') {
					item.canEdit = true
				}
			})
		}
	}
}
</script>
